<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>8.解决回调地狱</title>
        <script type="text/javascript" src="./axios.js"></script>
    </head>
    <body>
        <button id="btn">点我发送请求</button>

        <script type="text/javascript" >
            const btn = document.getElementById('btn')
            btn.onclick = ()=>{
                let x1 = axios.get('http://jsonplaceholder.typicode.com/posts')        
                x1.then(
                    value => {
                        console.log('第一次请求成功了',value.data)
                        let x1 = axios.get('http://jsonplaceholder2.typicode.com/posts')        
                        x1.then(
                            value => {
                                console.log('第二次请求成功了',value.data)
                                let x1 = axios.get('http://jsonplaceholder.typicode.com/posts')        
                                x1.then(
                                    value => {
                                        console.log('第三次请求成功了',value.data)
                                    },
                                    reason => {
                                        console.log('第三次请求失败了',reason)
                                    }
                                )
                            },
                            reason => {
                                console.log('第二次请求失败了',reason)
                            }
                        )
                    },
                    reason => {
                        console.log('第一次请求失败了',reason)
                    }
                )       
            }
        </script>
    </body>
</html>